<template>
  <div class="pages invoiceLook">
    <div class="operationBox tableSearch">
      <el-button type="primary" @click="goBack()" size="mini">返回</el-button>
    </div>
    <el-form :model="formdata" ref="formdata" label-width="120px" size="mini" class="goodsbatchs">
      <el-row>
        <el-col :span="8">
          <el-form-item class="rowtwo" label="企业客户：" prop="shopName">
            <el-input placeholder="请输入内容" size="mini" v-model="formdata.shopName" class="input-with-select" disabled>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仓库：" prop="warehouseName">
            <el-input v-model="formdata.warehouseName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="收货状态：" prop="outStatus">
            <el-input v-model="saleReceivingsStatusArr[formdata.outStatus]" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单据日期：" prop="orderDate">
            <el-date-picker disabled v-model="formdata.orderDate" format="yyyy年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="单据编号：">
            <el-input v-model="formdata.outCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="来源单号：">
            <el-input v-model="formdata.saleCode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="收货人：">
            <el-input v-model="formdata.consignee" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="手机号码：">
            <el-input v-model="formdata.linkman" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="座机电话：">
            <el-input v-model="formdata.fixPhone" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地址：">
            <el-input v-model="formdata.address" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="物流单号：">
            <el-input v-model="formdata.logisticsCode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 物料表格 -->
    <div class="tableMain">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="#" width="25"></el-table-column>
        <el-table-column prop="goodsCode" label="商品货号" align="center"></el-table-column>
        <el-table-column prop="barCode" label="商品条码" align="center" width="200"></el-table-column>
        <el-table-column prop="goodsName" label="商品" align="center" width="200"></el-table-column>
        <el-table-column prop="goodsBatchNumber" label="商品批次" align="center">
           <template slot-scope="scope" >
            <span v-if="scope.row.isBatch === '1'">{{scope.row.goodsBatchNumber}}</span>
            <span v-if="scope.row.isBatch === '0'">{{"---"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dateInProduced" label="生产日期" align="center" width="100">
           <template slot-scope="scope" >
            <span v-if="scope.row.isBatch === '1'">{{scope.row.dateInProduced}}</span>
            <span v-if="scope.row.isBatch === '0'">{{"---"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsSpec" label="规格型号" align="center">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.goodsSpec" :key="index">
              <span>{{item.paramName}} :</span>
              <span>{{item.paramValue}} </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="unitName" label="单位" align="center" width="200"></el-table-column>
        <el-table-column prop="goodsNum" label="数量" align="center"></el-table-column>
        <el-table-column prop="goodsPrice" label="销售价" align="center"></el-table-column>
        <el-table-column prop="goodsAmount" label="总价" align="center">
          <template slot-scope="scope">
            <span>{{(Number(scope.row.goodsPrice)*Number(scope.row.goodsNum)).toFixed(2)}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="th-right">
      <el-form :model="formdata" label-width="120px" size="mini">
        <el-row>
          <el-col :span="8">&nbsp;</el-col>
          <el-col :span="6">
            <el-form-item label="操作员：">
              <el-input v-model="formdata.userName" disabled></el-input>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="formdata.remark" type="textarea" maxlength="50" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总计：" prop="outAmount">
              <el-input v-model="formdata.outAmount" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import utils from "@/util/state";
import util from "@/util";
import { getRepertoryOutBoundDetail } from "@/api";
export default {
  computed: mapState(["sub", "merchantId", "linkName"]),
  data () {
    return {
      id: "",
      birthOrderif: false, //生单的显示隐藏
      saleReceivingsStatusArr:utils.saleReceivingsStatusArr,//订单状态
      tableData: [],
      formdata: {
        saleCode: "",
        outStatus: "0",
        supplierId: "",
        purchaseStatus: 0,
        shouhuoStatus: 0,
        fukuanStatus: 0,
        supplierName: "",
        purchaseStatus: "",
        orderDate: "",
        purchaseinCode: "",
        remark: "",
        purchaseAmount: 0,
        freight: 0,
        taxAmount: 0,
        amount: 0,
        shopName: "" ,//企业客户
        contactSelectedId: '',  // 选中的收货人Id
        consignee: '',  // 收货人
        linkman: '',  // 收货人手机
        fixPhone: '',  // 收货人座机号
        countries: '',
        province: '',  // 收货人省
        city: '',  // 收货人市
        area: '',  // 收货人区
        address: '',  // 收货人详细地址
        addressDetail: '',  // 收货人完整地址
        logisticsCode: '',  // 物流单号
       },
       paymentMethod: ["线下付款", "线上付款", "预付款支付"], // 支付方式数组
    };
  },
  mounted () {
    this.id = util.getQuery().id;
    this.lookdetail(this.id);
  },
  methods: {
    // 查看详情
    lookdetail (id) {
      let data = {
        id: id,
        shopId:this.merchantId,
      };
      getRepertoryOutBoundDetail(data).then(res => {
        let date = res.data.orderDate
        delete res.data.orderDate
        this.formdata = res.data;
        this.formdata.orderDate = util.foryear(date);
        this.tableData = res.data.goodsList;
        this.formdataTotal = res.data.outAmount
        if (this.formdata.purchaseStatus === 0) {
          this.birthOrderif = true;
        }
      });
    },
    // 点击返回按钮
    goBack () {
      history.back();
    }
  }
};
</script>

<style scoped>
.th-right {
  margin-top: 20px;
}
</style>
